<template>
	<view class="">
		<commonHeader :showBack="true" :navigationBarStyle="{ iconText: '商品详情' }"></commonHeader>
		<view class="page-content" :style="{'padding-top': lineHeight + 'rpx'}">
			<view class="shopbody">
				<!-- <img :src="goodItem.images[0]" alt="" srcset="" style="margin: 0 auto;padding-top: 20rpx;"> -->
				<view class="" style="margin: 0 auto;padding-top: 20rpx;width: 640rpx;">
					<u-swiper :list="goodItem.images" :autoplay="false" @change="change" @click="previewImage"
						height="250">

					</u-swiper>
				</view>
				<view class="product-title">{{goodItem.productName}}</view>
				<view class="sub-product-title">{{goodItem.productBrief}}</view>
				<view class="product-total justify-start align-center">
					<view class="price">
						<span class="unit">￥</span>
						<span class="price">{{ goodItem.price }}</span>
					</view>
				</view>
			</view>
			<view class="hongbao justify-between" @click="showCoupon = true" v-if="(JSON.stringify(goodItem.last) != '{}') || (JSON.stringify(goodItem.next) != '{}')">
				<view class="align-center" v-if="JSON.stringify(goodItem.last) != '{}'" @click="pushProductDetails(goodItem.last)">
					<u-icon name="arrow-left" color="#000000" size="16"></u-icon>
					<span class="hongbao-title">前一个商品</span>
				</view>
				<view class="" v-if="!goodItem.last || JSON.stringify(goodItem.last) == '{}'">
					
				</view>
				<view class="content align-center" v-if="JSON.stringify(goodItem.next) != '{}'" @click="pushProductDetails(goodItem.next)">
					<span class="hongbao-title">后一个商品</span>
					<u-icon name="arrow-right" color="#000" size="14"></u-icon>
				</view>
				<view class="" v-if="!goodItem.next || JSON.stringify(goodItem.next) == '{}'">
					
				</view>
			</view>
			<view class="remark" v-if="goodItem.skuType != 1">
				<view class="tag-title">
					规格
				</view>
				<view class="content align-center">
					<view class="table">
						<view class="th align-center" v-for="(item,index) in goodItem.map">
							<view class="" v-if="goodItem.skuType == 2">
								<span class="" style="padding-right: 6rpx;font-size: 28rpx;" v-for="name in item.name">
									<!-- valueCodesArray -->
									{{name.skuName}}:{{name.skuValue}}
								</span>
							</view>
							<view class="" v-if="goodItem.skuType == 1">
								{{goodItem.names[0].skuName}}
							</view>
							<view><span style="font-size: 24rpx;">¥</span>{{item.price}}</view>
							<view><img src="/static/icon/home/icon_tianjia@2x.png" alt="" srcset=""
									@click.stop="addshowRun(item, 'specs')"></view>
						</view>
					</view>
				</view>
			</view>

			<view class="remark">
				<view class="tag-title">
					详情
				</view>
				<view class="content align-center">
					<img :src="item" v-for="item in goodItem.images" alt="" srcset="" style="width: 100%;">
				</view>
			</view>

			<view class="remark">
				<view class="tag-title">
					【角阀系列】其他商品
				</view>
			</view>

			<view class="card-product">
				<view class="block_6">
					<view class="block_7 flex-row" v-for="goods in goodItem.similarProducts"
						@click="pushProductDetails(goods)">
						<view class="image-text_3 flex-col justify-between">
							<view class="group_5 flex-col">
								<image :src="goods.image" class="group_5_image" referrerpolicy="no-referrer" />
							</view>
							<view class="text-group_3 flex-col justify-between">
								<text class="text_13">{{ goods.productName }}</text>
								<view class="align-center justify-between">
									<view class="align-center">
										<text class="text_15">￥</text>
										<text class="text_14">{{ goods.price }}</text>
									</view>
									<image @click.stop="addshowRun(goods)" class="label_5" referrerpolicy="no-referrer"
										src="/static/icon/home/icon_tianjia@2x.png" />
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>
		</view>
		<view class="total align-center">
			<view class="total-price align-center">
				<button type="default"
					style="background: none;font-size: 24rpx;font-weight: 400;line-height: 40rpx;border: none;"
					open-type="share">
					<view class="title flex-col align-center">
						<img src="/static/icon/shopCar/icon_fenxiang@2x.png" alt="" srcset="">
						分享
					</view>
				</button>
				<view class="title flex-col align-center" @click="callSelect">
					<img src="/static/icon/shopCar/icon_dianhua@2x.png" alt="" srcset="">
					咨询
				</view>
				<view class="title  flex-col align-center" @click="pushShopCar">
					<img src="/static/icon/shopCar/icon_gouwuche@2x.png" alt="" srcset="">
					购物车
					<view class="badge">
						<u-badge bgColor="#F8635D" max="99" :value="badgeValue" offset='[10,20]'>
						</u-badge>
					</view>
				</view>
			</view>
			<view class="order-button">
				<u-button shape="circle" class="button-o" color="linear-gradient(90deg, #FFCF1D, #FF8A19);"
					@click="addshowRun(goodItem)">
					加入购物车
				</u-button>
			</view>
		</view>


		<u-popup :show="addshow" @close="close" :closeOnClickOverlay="true">
			<view class="addbox">
				<view class="info">
					<view class="le">
						<image :src="tempGoodsData.images[0]" class="leimg" />
					</view>
					<view class="ri">
						<view class="name">{{ tempGoodsData.productName }}</view>
						<view class="price">
							<text class="price-c">￥</text>
							{{ tempGoodsData.price }}
						</view>
					</view>
				</view>
				<view class="names" v-if="tempGoodsData.skuType === 2">
					<view class="names-list" v-for="list in tempGoodsData.names">
						<view class="names-title">{{ list.skuName }}</view>
						<view class="names-item-box">
							<view class="names-item"
								:class="valueCodess[list.nameCode] == item.valueCode ? 'names-item-act' : ''"
								v-for="item in list.values" @click="selectValuecode(list.nameCode, item.valueCode)">
								{{ item.skuValue }}
							</view>
						</view>
					</view>
				</view>
				<view class="ops-box">
					<view class="ops-title">数量</view>
					<view class="ops-number">
						<u-number-box v-model="addCarNumber"></u-number-box>
					</view>
				</view>
				<view class="btns">
					<view @click="addCarRun" class="btn">加入购物车</view>
					<view class="close" @click="addshow = false">
						<u-icon color="#333333" name="close-circle" size="18"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	import couponSelect from "@/components/shopCar/coupon-select.vue"
	import orderSuccessfully from "@/components/shopCar/order-successfully.vue"
	import addressModal from "@/components/address/address.vue"
	import base from '@/config/baseUrl';
	export default {
		components: {
			couponSelect,
			orderSuccessfully,
			addressModal
		},
		data() {
			return {
				count: 0,
				showCoupon: false,
				showOrderSuccessfullyModal: false,
				address: undefined,
				list: [],
				getSettlement: null,
				remark: '',
				shopInfo: {},
				submitData: '',
				addressShow: true,
				lineHeight: 0,
				options: null,
				goodItem: {},
				addshow: false,
				addSkuid: null,
				addCarNumber: 1,
				tempGoodsData: {},
				showCall: false,
				phoneList: [{
						name: '',
						disabled: true
					},
					{
						name: '拨打',
					},
				],
				badgeValue: 0,
				valueCodess: {}, // 存放规格参数
			}
		},
		onShow() {
			uni.$on('cartCount', (res) => {
				this.badgeValue = res
			})
			uni.$emit('need');
		},
		onLoad(e) {
			console.log(e.options, '123456');
			setTimeout(() => {
				uni.$on('cartCount', (res) => {
					this.badgeValue = res
				})
			}, 500)
			this.options =  {
					productId: e.productId,
					shopId: e.shopId,
					skuId: e.skuId,
			}
			uni.$on('getHeight', res => {
				console.log(res, 'getHeight');
				this.lineHeight = res.ktxStatusHeight + 84;
			})
			this.shopInfo = uni.getStorageSync('shopInfo');
			this.getProduct()

		},
		methods: {
			getProduct() {
				const parmas = {
					productId: this.options.productId,
					shopId: this.options.shopId,
					skuId: this.options.skuId,
				}
				this.$http.get("product/getById", parmas).then(res => {
					this.goodItem = res
					console.log(this.goodItem['map']);

					for (let maps in this.goodItem['map']) {
						this.goodItem['map'][maps].valueCodesArray = this.goodItem['map'][maps].valueCodes.split(
							',')
					}

					for (let maps in this.goodItem['map']) {
						this.goodItem['map'][maps].name = []
						this.goodItem['map'][maps].valueCodesArray.forEach(item => {
							this.goodItem.names.forEach(name => {
								name.values.forEach(name => {
									if (item == name.valueCode) {
										this.goodItem['map'][maps].name.push(name)
									}
								})
							})

						})
					}
					// this.goodItem['map'].map(item => {
					// 	console.log(item);
					// 	item.valueCodesArray = item.valueCodes.split(',')
					// })
					console.log(this.goodItem, '123');
				}).catch(res => {
					console.log(res, 1234);
				})
			},
			getAll() {
				this.$http.get("receive/getAll", {
					page: 1,
					pageSize: 10
				}).then(res => {
					console.log(res);
				}).catch(res => {
					console.log(res, 1234);
				})
			},
			// 购物车列表
			async getCart() {
				const shopInfo = uni.getStorageSync('shopInfo');
				await this.$http.get("cart/getCart", {
					shopId: shopInfo.shopId
				}).then(res => {
					const data = res
					let count = 0
					data.forEach((item, index) => {
						item.skus.forEach((skuItem, skuIndex) => {
							count = count + skuItem.number
						})
					})
					uni.$emit('cartCount', count)
					uni.$on('need', () => {
						uni.$emit('cartCount', count)
					})
				})
			},
			// 购物车总计
			getSettlement2() {
				const param = {
					shops: [
						// 	{
						// 	shopId: 187,
						// 	skus: [{
						// 		ifLogistics: 1,
						// 		number: 3,
						// 		selected: 1,
						// 		skuId: 1
						// 	}]
						// },
					]
				}
				this.list.forEach((item, index) => {
					param.shops.push({
						shopId: item.shopId,
						skus: []
					})
					item.skus.forEach((subItem, subIndex) => {
						param.shops[index].skus.push({
							ifLogistics: subItem.ifLogistics,
							number: subItem.number,
							selected: subItem.selected,
							skuId: subItem.skuId
						})
					})
				})
				this.$http.post("order/getSettlement2", param).then(res => {
					res.total = 0
					res.number = 0
					res.shops.forEach((item, index) => {
						res.total = res.total + item.total
						res.number = res.number + item.number
					})
					this.getSettlement = res
				})
			},

			couponChange() {},
			countChange(v, skuId) {
				console.log(v, skuId);
				this.updateNumber(v.value, skuId).then(res => {
					this.getSettlement2()
				})
			},
			async updateNumber(number, skuId) {
				const param = {
					number: number,
					skuId: skuId
				}
				await this.$http.post("cart/updateNumber", param).then(res => {})
			},
			showCouponFn(value) {
				this.showCoupon = value
			},
			showOrderSuccessfullyModalFn(value) {
				this.showOrderSuccessfullyModal = value
				let pages = getCurrentPages()

				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.popRefreshData()
				uni.navigateBack({})
			},
			/**
			 * 加入购物车抽屉
			 */
			addshowRun(item, type) {
				console.log(item);
				this.addshow = true;
				this.addSkuid = item.skuId;
				this.addCarNumber = 1;
				this.$http
					.get("product/getById", {
						shopId: this.goodItem.shopId,
						productId: this.goodItem.productId,
						skuId: item.skuId,
					})
					.then((res) => {
						console.log(res);
						this.tempGoodsData = res;
						if (res.skuType !== 1) {
							if (type == 'specs') {
								this.selectSpac(item, res)
							} else {
								this.dispSpac(res)
							}
						} else {

						}
					});
			},
			close() {
				this.addshow = false;
			},
			// 规格里面的spac值
			selectSpac(map, res) {
				console.log(map.name, '123');
				console.log(map.names, '123');
				console.log(res, '123');
				this.valueCodess = {}

				map.name.forEach((item, index) => {
					this.valueCodess[res.names[index].nameCode] = item.valueCode;
				})
				console.log(this.valueCodess, 'this.valueCodess');
			},
			// 默认spac值
			dispSpac(data) {
				this.valueCodess = {}
				for (const some of data.names) {
					this.valueCodess[some.nameCode] = some.values[0].valueCode;
				}
				console.log(this.valueCodess, 'this.valueCodess');
			},
			callSelect() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.chargePersonPhone
				});
			},
			pushShopCar() {
				uni.switchTab({
					url: '/pages/shopCar/shopCar'
				});
			},
			// 选择规格
			selectValuecode(key, value) {
				console.log(key);
				console.log(value);
				this.valueCodess[key] = value
				console.log(this.valueCodess);
				this.$forceUpdate();
			},
			/**
			 * 加入购物车请求
			 */
			addCarRun() {
				const params = {
					skuId: this.getSkuidBycode(),
					number: this.addCarNumber,
				};
				this.$http.post("cart/addCart", params).then((res) => {
					if (res) {
						console.log(res);
						if (res) {
							uni.showToast({
								title: "加入购物车成功"
							});
							this.getCart()
							this.addshow = false;
						}
					} else {}
				});
			},
			/**
			 * 根据所选规格获取skuid
			 */
			getSkuidBycode() {
				if (this.tempGoodsData.skuType === 1) { //单规格
					return this.tempGoodsData.skuId
				}
				const temp = []
				for (const key in this.valueCodess) {
					if (Object.hasOwnProperty.call(this.valueCodess, key)) {
						const value = this.valueCodess[key];
						temp.push(value)
					}
				}
				const code = temp.toString();
				return this.tempGoodsData.map[code].skuId
			},
			pushProductDetails(good) {
				this.options = good
				this.getProduct()
				// uni.navigateTo({
				// 	url: '/pages/home/productDetails?options=' + encodeURIComponent(JSON.stringify(good)),
				// });
			},
			previewImage(e) {
				console.log(e);
				var i = this.goodItem.images; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: e, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})

			}



		}
	};
</script>

<style lang="scss" scoped>
	.page-content {
		// padding-bottom: 380rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 380rpx);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 380rpx);
	}

	.create-address {
		padding: 30rpx 35rpx 60rpx;
		background: #fff;
		border-bottom: 6rpx dashed #E66E63;

		.icon img {
			height: 43rpx;
			width: 38rpx;
		}

		.tips {
			color: #999;
			font-size: 32rpx;

			.address-detail {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
			}
		}

	}

	.select-address {
		padding: 30rpx 35rpx 30rpx;
		background: #fff;
		border-bottom: 6rpx dashed #E66E63;

		.icon img {
			height: 43rpx;
			width: 38rpx;
		}

		.tips {
			color: #999;
			font-size: 32rpx;

			.address-detail {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.name {
			padding-left: 40rpx;
			flex: 1;

			view:first-child {
				margin-bottom: 10rpx;
			}
		}

	}

	.shopbody {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;

		.product-title {
			padding-top: 20rpx;
			padding-left: 30rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.sub-product-title {
			padding-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.gitem {
			width: 100%;
			height: 215rpx;
			padding: 20rpx 25rpx;
			display: flex;
			background: #fff;

			.left {
				width: 205rpx;
				height: 100%;

				.img {
					width: 205rpx;
					height: 140rpx;
					box-shadow: 0px 2px 24px 0px rgba(51, 51, 51, 0.12);
					border-radius: 8rpx;
				}
			}

			.right {
				flex: 1;
				height: 100%;
				padding-left: 20rpx;

				.name {
					width: 136rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 39rpx;
					padding-bottom: 16rpx;
				}

				.ops {
					.space-title {
						width: 88rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #fff;
						background: #FA625D;
						border-radius: 4rpx;
						text-align: center;
					}

					.space-content {
						height: 45rpx;
						line-height: 45rpx;
						font-size: 26rpx;
						border-radius: 4rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

				.price-count {
					margin-top: 10rpx;

					.price {
						.unit {
							font-size: 28rpx;
							font-family: SF UI Text;
							font-weight: 400;
							color: #333;
							line-height: 48rpx;
							height: 28px;
						}

						.price {
							font-size: 40rpx;
							font-family: SF UI Text;
							font-weight: bold;
							color: #333;
							line-height: 48rpx;
							height: 28px;
						}
					}

					.u-number-box,
					.u-number-box__minus,
					.u-number-box__plus {
						height: 58rpx !important;
					}
				}
			}
		}

		.product-total {
			padding-left: 30rpx;
			height: 80rpx;
			line-height: 80rpx;

			.price {
				padding-right: 10rpx;

				.unit {
					font-size: 28rpx;
					font-family: SF UI Text;
					font-weight: 400;
					color: #E86C64;
					line-height: 48rpx;
					height: 28px;
				}

				.price {
					font-size: 40rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
					line-height: 48rpx;
					height: 28px;
				}
			}
		}
	}

	.hongbao {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		margin: 25rpx 0;
		box-sizing: border-box;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding-left: 25rpx;
		padding-right: 25rpx;
		font-size: 28rpx;

		&-icon {
			display: inline-block;
			width: 36rpx;
			height: 36rpx;
			background: #E66E63;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 39rpx;
			text-align: center;
		}

		&-title {
			padding-left: 13rpx;
		}
	}

	.remark {
		width: 100%;
		margin: 25rpx 0;
		box-sizing: border-box;
		background: #FFFFFF;

		.tag-title {
			position: relative;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 25rpx 0 46rpx;
			font-size: 32rpx;
			color: #333;
		}

		.tag-title::before {
			position: absolute;
			top: 50%;
			left: 25rpx;
			width: 8rpx;
			height: 30rpx;
			line-height: 30rpx;
			background-color: #FA625D;
			transform: translateY(-50%);
			content: "";
			border-radius: 4rpx;
		}

		.content {

			.table {
				.th {
					height: 70rpx;
					line-height: 70rpx;
					border-top: 1px solid #ddd;

					view:first-child {
						width: 350rpx;
						padding-left: 40rpx;
					}

					view:nth-child(2) {
						width: 240rpx;
						padding-left: 40rpx;
						border-left: 1px solid #ddd;
						border-right: 1px solid #ddd;
						font-size: 36rpx;
						font-family: SF UI Text;
						font-weight: bold;
						color: #E86C64;
						line-height: 48rpx;
					}

					view:last-child {
						width: 145rpx;

						img {
							margin: 0 auto;
						}
					}
				}

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

		}
	}

	.total {
		position: fixed;
		bottom: 0rpx;
		// height: 280rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 8rpx 0px rgba(153, 153, 153, 0.1200);
		z-index: 999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		padding-left: 30rpx;
		padding-right: 15rpx;

		.total-price {
			flex: 1;
			padding: 19rpx 25rpx;

			.title {
				position: relative;
				height: 82rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin-right: 40rpx;
				text-align: center;
				width: 42px;

				img {
					width: 43rpx;
					height: 43rpx;
				}
			}

			.price {
				.unit {
					font-size: 28rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
					height: 28px;
					padding: 0 0 0 15rpx;
				}

				.price {
					font-size: 36rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
				}
			}
		}

		.order-button {
			width: 210rpx;
			margin: 0 auto;

			/deep/.u-button {
				height: 75rpx !important;
				margin-top: 12rpx !important;
				margin-bottom: 14rpx !important;
			}

			.button-o {
				height: 75rpx !important;
				margin-top: 14rpx !important;
			}
		}
	}

	/deep/ .u-number-box__input {
		width: 100rpx !important;
	}


	.block_6 {
		margin: 0 auto;
		width: 720rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
	}

	.block_7 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 6rpx;
		width: 355rpx;
		height: 366rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
	}

	.image-text_3 {
		width: 355rpx;
		height: 347rpx;
	}

	.group_5 {
		border-radius: 6rpx 0rpx 0rpx 6rpx;
		width: 253rpx;
		height: 252rpx;
	}

	.group_5_image {
		width: 355rpx;
		height: 252rpx;
	}

	.text-group_3 {
		margin: 19rpx 0 0 14rpx;
	}

	.text_13 {
		width: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_14 {
		color: rgba(232, 108, 100, 1);
		font-size: 36rpx;
		font-family: SFUIText-Bold;
		text-align: left;
		white-space: nowrap;
		// line-height: 36rpx;
		// margin: 18rpx 0 0 28rpx;
	}

	.text_15 {
		color: rgba(232, 108, 100, 1);
		font-size: 28rpx;
		text-align: left;
		padding-right: 5rpx;
		// white-space: nowrap;
		// line-height: 28rpx;
		// margin: 326rpx 0 0 -236rpx;
	}

	.label_5 {
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}


	.addbox {
		width: 750rpx;
		max-height: 890rpx;
		padding: 20rpx 0rpx 40rpx 40rpx;


		.info {
			width: 100%;
			display: flex;

			.le {
				width: 205rpx;
				height: 140rpx;
				border-radius: 8rpx;

				.leimg {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.ri {
				flex: 1;
				margin-left: 24rpx;
				height: 140rpx;

				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				.name {
					width: 100%;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					margin-top: 20rpx;
				}

				.price {
					font-size: 40rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #e86c64;
					margin-top: 38rpx;

					.price-c {
						font-size: 32rpx;
					}
				}
			}
		}

		.names {
			margin-top: 30rpx;

			.names-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin: 40rpx 0rpx 20rpx 0;
			}

			.names-item-box {
				display: flex;

				.names-item {
					height: 56rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					border: 1rpx solid #333333;
					padding: 10rpx 22rpx;
					margin-right: 20rpx;
				}

				.names-item-act {
					background: #fa625d;
					color: #fff;
					border: none;
				}
			}
		}

		.ops-box {
			height: 130rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #e1e1e1;
			border-bottom: 1px solid #e1e1e1;
			margin-top: 34rpx;

			.ops-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.ops-number {
				margin-left: 38rpx;
			}
		}

		.btns {
			display: flex;
			margin-top: 125rpx;

			.btn {
				width: 585rpx;
				height: 75rpx;
				background: #fa625d;
				border-radius: 38rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.close {
				margin-left: 26rpx;
				height: 75rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.badge {
		position: absolute;
		left: 60%;
		top: -10%;
		z-index: 999
	}
</style>
